<template>
  <view class="app">
    <view class="title_area">
      <view class="title_area_pic">
        <image src="../../static/login_pic.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!-- <view class="title_area_txt">逐金污师</view> -->
    </view>


    <view class="account_area">
      <view class="line_desc user_info">
        <view class="icon_desc">
          <image src="../../static/icon_user.png" style="width: 100%;height: 100%;"/>
        </view>
        <view class="input_desc">
          <input v-model="loginParams.username" class="font_desc" placeholder="请输入您的手机号" type="text"/>
        </view>
      </view>
      <view class="line_desc user_info">
        <view class="icon_desc">
          <image src="../../static/icon_pw.png" style="width: 100%;height: 100%;"/>
        </view>
        <view class="input_desc">
          <input v-model="loginParams.password" class="font_desc" placeholder="请输入您的密码" type="password"/>
        </view>
      </view>
    </view>
    <view class="submit_area">
      <!--- <view><button @click="login" class="btn">登录</button> -->
      <view>
        <button class="btn" slot="value" open-type="chooseAvatar" @chooseavatar="login">登录</button>
      </view>
      <!--
      <view class="xuke">
        您已阅读并同意<a class=".xule_txt" href="#">逐金污师相关协议</a>
      </view>
      -->
    </view>

  </view>
</template>

<script>
import request from '../../utils/request.js'

export default {
  data() {
    return {
      title: 'Hello',
      loginParams: {
        username: '',
        password: ''
      }
    }
  },
  onLoad() {

  },
  created() {
    this.queryList();
  },
  onShareAppMessage(res) {
    let pages = getCurrentPages(); //获取当前页面栈的信息
    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '逐金污师丨成人情趣甄选好物',
        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
      }
    },
	onShareTimeline(res) {
	  let pages = getCurrentPages(); //获取当前页面栈的信息
	  let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '逐金污师丨成人情趣甄选好物',
	      path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
	    }
	  },
  methods: {
    queryList() {
      let _this = this;
    },
    login(e) {
      var _this = this;
      //console.log(res.userInfo.avatarUrl); // 用户头像
      //uni.setStorageSync('userImg', res.userInfo.avatarUrl);
      uni.setStorageSync('userImg', e.detail.avatarUrl);
      request({
        url: '/app/login',
        method: "POST",
        data: _this.loginParams,
      }).then(res => {
        if (200 == res.code) {
          uni.setStorageSync('token', res.token);
          uni.switchTab({
            url: '../../pages/me/me'
          })
        } else {
          uni.clearStorageSync()
          var msg = res.msg;
          if (msg.indexOf("停用") > 0) {
            uni.showToast({
              title: '账号已经停用',
              icon: 'error',
              duration: 2000
            });
          } else {
            uni.showToast({
              title: '用户名密码错误',
              icon: 'error',
              duration: 2000
            });
          }
        }
      })
    }
  }
}
</script>

<style>
.title_area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  width: 100%;
  margin-top: 180rpx;
  /** border: solid 1rpx red; **/
}

.title_area_pic {
  width: 340rpx;
  height: 72rpx;
  /** border: solid 1rpx green; **/
}

.title_area_txt {
  font-size: 46rpx;
  /** border: solid 1rpx blue; **/
}

.account_area {
  margin-top: 180rpx;
}

/**输入域、输入域icon样式**/
.icon_desc {
  width: 24rpx;
  height: 26rpx;
  margin-left: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**输入域、输入域字体样式**/
.input_desc {
  margin-left: 10rpx;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 20rpx;
  color: #d4d4d4;
  width: 512rpx;
}

/** 输入域字体样式 **/
.font_desc {
  font-size: 36rpx;
  color: black;
}

/** 输入域、行样式 **/
.line_desc {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  border-bottom: solid 1rpx #d3d3dd;
  padding-bottom: 15rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}

/** 提交域**/
.submit_area {
  margin-top: 60rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  width: 640prx;
  height: 92rpx;

}

/** 提交域 ， 按钮**/
.btn {
  color: black;
  font-size: 36rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  border-radius: 46rpx;
}

/**许可信息**/
.xuke {
  display: flex;
  padding-top: 20rpx;
  padding-left: 150rpx;
  font-size: 26rpx;
}

/**许可信息描述**/
.xule_txt {
  margin-left: 4rpx;
  color: red;
  font-weight: 400;
}
</style>
